<template>
  <el-container>
      <el-header>
        <div class="top_boss" id="top" style="display: none" id="top">
          <div class="top">
            <div style="float: left;margin: 20px auto;"><img src="../assets/logo.png"></div>
            <el-a href="" style="color:#ff5114 ">介绍</el-a>
            <el-a href="">精品课程</el-a>
            <div class="top_right">
              <div class="top_right_text"><img src="../assets/qq.png"></div>
              <div class="top_right_text">在线咨询</div>
              <div class="top_right_text">|</div>
              <div class="top_right_text" style="text-align: right;">咨询热线：010-59301232</div>
            </div>
          </div>
        </div>
        <div class="top_boss" id="top2" style="background: #fff;display: none">
          <div class="top">
            <div style="float: left;margin: 20px auto;"><img src="../assets/fdlogo.png"></div>
            <el-a href="" style="color:#ff5114">介绍</el-a>
            <ela href="" style="color:#808080">精品课程</ela>
            <div class="top_right" style="color:#808080">
              <div class="top_right_text"><img src="../assets/qq1.png"></div>
              <div class="top_right_text">在线咨询</div>
              <div class="top_right_text">|</div>
              <div class="top_right_text" style="text-align: right;">咨询热线：010-59301232</div>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="boss">
          <!-- f1 -->
          <div class="f1" id="f1" style="display: none">
            <div class="f1-border">
              <h1>为学校、企业的慕课建设提供云服务</h1>
              <p>一款基于MOOC和SPOC教育理念，采用SaaS模式，帮助学校快速搭建在线教育平台的云服务产品</p>
              <el-button href="">申请试用</el-button>
              <div href="">浏览演示站</div>
            </div>
          </div>
          <!-- f1 -->
          <!-- f2 -->
          <div class="f2" id="f2" style="display: none">
            <div class="f2-border">
              <h1>多端适配的网站</h1>
              <p>网站前后台均采用Bootstrap布局框架，页面自适应，可在手机、平板、电脑等终端上浏览和使用。视频播放器采用Flash和HTML5自动切换技术，在不同系统不同浏览器下都可正常播放</p>
            </div>
          </div>
          <!-- f2 -->
          <!-- f3 -->
          <div class="f3" id="f3" style="display: none">
            <div class="f3-border">
              <h1>专业周到的服务</h1>
              <div>
                <div class="f3_float text-center">
                  <div><img src="../assets/cloud.png"></div>
                  <div>云服务器集群</div>
                </div>
                <div class="f3_float text-center">
                  <div><img src="../assets/cloud2.png"></div>
                  <div>双备份防攻击</div>
                </div>
                <div class="f3_float text-center">
                  <div><img src="../assets/cloud3.png"></div>
                  <div>机房分区部署</div>
                </div>
              </div>
              <div class="f3_text">
                多机房云服务器集群，分布式部署，在线服务稳定且高效；数据冷热双备份，机房软硬防攻击，数据安全永不丢失；数据通过CDN存储到不同地区机房，支持数千人同时在线。学校不需关注服务器部署及维护、带宽、断网等常规网校所面临的IT问题。省时省力省钱。
              </div>
            </div>
          </div>
          <!-- f3 -->
          <!-- f4 -->
          <div class="f4" id="f4" style="display: none">
            <div class="f4-border">
              <h1>持续完善的系统</h1>
              <p>慕课大学会持续不断地优化和增加功能，适应在线教育和慕课发展的日新月异，应对机构需求的不断变化。使用慕课大学，学校可以一直享用最新、最好、最有用的服务。</p>
            </div>
          </div>
          <!-- f4 -->
          <!-- f5 -->
          <div class="f5" id="f5" style="display: none">
            <div class="f3-border">
              <h1>精挑细选的实战课程</h1>
              <div>
                <div class="f3_float text-center">
                  <div><img src="../assets/co.png"></div>
                  <div>业内强强合作</div>
                </div>
                <div class="f3_float text-center">
                  <div><img src="../assets/co2.png"></div>
                  <div>免费使用课程</div>
                </div>
                <div class="f3_float text-center">
                  <div><img src="../assets/co3.png"></div>
                  <div>课程资源丰富</div>
                </div>
              </div>
              <div class="f3_text">
                慕课大学与京东、慕课网等机构合作，为学校提供数百门IT课程、京东内训课程等资源。学校可免费使用这些课程快速建设自己的在线教育平台。同时，随着合作伙伴的扩展，课程资源还会越来越多，涉及范围也会越来越广。
              </div>
            </div>
          </div>
          <!-- f5 -->
          <!-- f6 -->
          <div class="f6" id="f6" style="display: none">
            <div class="f6-border">
              <h1>多端适配的网站</h1>
              <p>网站前后台均采用Bootstrap布局框架，页面自适应，可在手机、平板、电脑等终端上浏览和使用。视频播放器采用Flash和HTML5自动切换技术，在不同系统不同浏览器下都可正常播放</p>
            </div>
          </div>
          <!-- f6 -->
          <!-- f7 -->
          <div class="f7" id="f7" style="display: none">
            <div class="f7_border">
                  <span class="f7_border_left">
                      <img src="../assets/f71.png">
                      <h1 style="padding: 20px 0px 20px 0px">学生使用慕课大学</h1>
                      <p style="line-height: 30px;">
                          学习学校提供的专业课程，并即时练习<br>学习慕课大学提供的精品课程，加强实践<br>记笔记、与同学讨论，加深学习效果<br>做作业、参加考试，检验自己所学</p>
                      <div class="f7_style">前台核心功能</div>
                      <div class="f7_float">
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position: 0px 0px;"></div>
                              <div class="f7_float_text_text">视频学习</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position: -54px 0px;"></div>
                              <div class="f7_float_text_text">文档学习</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position: -110px 0px;"></div>
                              <div class="f7_float_text_text">在线练习</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position: 0px -46px;"></div>
                              <div class="f7_float_text_text">在线作业</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position: -56px -47px;"></div>
                              <div class="f7_float_text_text">在线考试</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position:-112px -47px;"></div>
                              <div class="f7_float_text_text">在线笔记</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position: 0 -92px;"></div>
                              <div class="f7_float_text_text">课程讨论</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position:-56px -92px;"></div>
                              <div class="f7_float_text_text">资料下载</div>
                          </div>
                          <div class="f7_float_text">
                              <div class="f7_float_text_img" style="background-position:-112px -92px;"></div>
                              <div class="f7_float_text_text">课程公告</div>
                          </div>
                      </div>
                  </span>
              <el-span class="f7_border_left">
                <img src="../assets/f72.png">
                <h1 style="padding: 20px 0px 20px 0px">学校使用慕课大学</h1>
                <p style="line-height: 30px;">
                  快速创建学校的在线教育平台<br>上传视频、文档类课程供学生学习<br>使用慕课大学提供的精品课程供学习学习<br>创建练习、作业、考试，验证学生的学习效果</p>
                <div class="f7_style">后台核心功能</div>
                <div class="f7_float">
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position:-166px 0;"></div>
                    <div class="f7_float_text_text">学生管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position: -222px 0;"></div>
                    <div class="f7_float_text_text">课程管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position: -278px 0;"></div>
                    <div class="f7_float_text_text">课表管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position: -168px -47px;"></div>
                    <div class="f7_float_text_text">作业管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position: -224px -50px;"></div>
                    <div class="f7_float_text_text">考试管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position:-278px -47px;"></div>
                    <div class="f7_float_text_text">成绩管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position:-168px -93px;"></div>
                    <div class="f7_float_text_text">人员管理</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position:-224px -92px;"></div>
                    <div class="f7_float_text_text">学习统计</div>
                  </div>
                  <div class="f7_float_text">
                    <div class="f7_float_text_img" style="background-position:-280px -92px;"></div>
                    <div class="f7_float_text_text">微专业</div>
                  </div>
                </div>
              </el-span>
            </div>
          </div>
          <!-- f7 -->
          <!-- f8 -->
          <div class="f8" id="f8" style="display: none">Copyright © 2015 imooc.com All Rights Reserved</div>
          <!-- f8 -->
        </div>
      </el-main>
  </el-container>

</template>

<script>
export default {
  name: "index"
}
</script>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/index.js"></script>
<script src="js/index.css"></script>
<!--<script src="js/vue.js"></script>-->

<style scoped>

</style>